<template>
    <div class="selectBox">
        <div class="selectTxt" @click="showDrop = !showDrop">
            <span></span>
            <input type="text" placeholder="{{placeholder}}" class="txtInput" v-model="selected" readonly/>
        </div>
        <ul class="selectlistArea" v-show="showDrop">
            <div class="searchInput" v-show="showSearch">
                <input type="text" placeholder="请输入关键字" class="isearch" v-model="searchQuery" name="query"/>
            </div>
            <li v-for="item in data | filterBy searchQuery" @click="changeItem(item.text)">{{item.text}}</li>
        </ul>
    </div>
</template>
<style lang="sass">
    .selectBox{
        width:150px;
        height: 30px;
        margin:0 auto;
        margin-bottom: 10px;
        position:relative;
        .selectTxt{
            width: 100%;
            height: 30px;
            .txtInput{
                -webkit-appearance: none;
                width: 99%;
                height: 100%;
                border:1px solid #eee;
                text-indent:5px;
            }
        }

        .selectlistArea{
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            left: 0;
            top:34px;
            z-index: 100;
            background: #fff;
            border: 1px solid #eee;
            .searchInput{
                padding: 5px;
                .isearch{
                    width: 98%;
                    height: 25px;
                    text-indent: 5px;
                    outline: none;
                    border:1px solid #eee;
                }
            }
            li{
                height: 30px;
                line-height: 30px;
                text-indent: 5px;
                border-bottom:1px solid #eee;
                &:hover{
                    background: #eee;
                }
                &:last-child{
                     border-bottom:none;
                }
            }
        }
    }
</style>
<script>

    import dbFetch from  '../services/dbFetch'

    export default {
        replace: true,
        props: ['placeholder','url','showSearch'],
        data (){
            return {
                data:[],
                showDrop:false,
                selected:'',
                searchQuery:''
            }
        },
        ready (){
            let that = this;

            dbFetch.fetchGet(this.url,{},function(res){
                that.data = res.responseBody;
            },function(res){
                console.log('请求出错了!');
            });
        },
        methods:{
            changeItem (name){
                console.log(name);
                this.selected = name;
                this.showDrop = false;
            }
        }
    }

</script>
